<template>
  <view>
    <view class="d-flex a-stretch bg-white position-fixed left-0 bottom-0 right-0"
      style="height: 100rpx; z-index: 100;">
      <!-- 收藏按钮 -->
      <view class="flex-1 d-flex flex-column a-center j-center line-h-md" hover-class="bg-light-secondary" style="margin-right: 20rpx;">
        <view class="iconfont icon-shoucang text-muted line-h-md"></view>
        收藏
      </view>

      <!-- 购物车按钮 -->
      <view class="flex-1 d-flex flex-column a-center j-center line-h-md position-relative" hover-class="bg-light-secondary" @tap="ToCart" style="margin-right: 20rpx;">
        <view class="iconfont icon-gouwuche text-muted line-h-md"></view>
        购物车
      </view>

      <!-- 加入购物车按钮 -->
      <view class="d-flex j-center a-center font-md text-white" hover-class="hover-bg-color-1" style="flex: 2.5; padding: 20rpx; border-radius: 5rpx 0 0 5rpx; background-color: #e44;" @tap="$emit('show')">
        加入购物车
      </view>
	  <!-- 购买按钮 -->
	  <view class="d-flex j-center a-center font-md text-white" hover-class="hover-bg-color-2" style="flex: 2.5; padding: 20rpx; border-radius: 0 5rpx 5rpx 0; background-color: #4a90e2;" @tap="$emit('show')">
	    购买
	  </view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      ToCart() {
        uni.switchTab({
          url: "../../pages/cart/cart"
        })
      }
    }
  }
</script>

<style scoped>
/* 设置悬停背景颜色 */
.hover-bg-color-1 {
  background-color: #d33 !important; /* 加入购物车按钮的悬停颜色 */
}

.hover-bg-color-2 {
  background-color: #3a7bd5 !important; /* 购买按钮的悬停颜色 */
}
</style>